<template>
    <a-drawer popup-container="#wrap" width="500px" :visible="show" :ok-loading="form.loading" @ok="submit" @cancel="show = false" unmountOnClose>
        <template #title>
            {{$t('components.create.62f3whq7zzk0')}}
        </template>
        <div class="table-info">
            <a-form ref="formRef" :model="form.data" @submit="submit" layout="vertical">
                <a-form-item field="name" :label="$t('components.create.61zemc8cb780')" :rules="[{ required: true, message: $t('components.create.61zemc8cb781') }]">
                    <a-input v-model="form.data.name" :placeholder="$t('components.create.61zemc8cb781')" />
                </a-form-item>
                <a-form-item field="name" :label="$t('components.create.61zemc8cb784')" :rules="[{ required: true, message: $t('components.create.61zemc8cb785') }]">
                    <a-input v-model="form.data.name" :placeholder="$t('components.create.61zemc8cb785')" />
                </a-form-item>
                <a-form-item field="name" :label="$t('components.create.60zemc8cc180')" :rules="[{ required: true,message: $t('components.create.60zemc8cc3w0') },{match:/^1[3456789]\d{9}$/,message:$t('components.create.60zemc8cc3w1')}]">
                    <a-input v-model="form.data.name" :placeholder="$t('components.create.60zemc8cc3w0')"/>
                </a-form-item>
                <a-form-item field="name" :label="$t('components.create.61zemc8cb786')" :rules="[{ message: $t('components.create.61zemc8cb787') },{required: true,match:/^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/,message: $t('components.create.61zemc8cb787')}]">
                    <a-input v-model="form.data.name" :placeholder="$t('components.create.61zemc8cb787')"/>
                </a-form-item>
                <a-form-item field="districtId" :label="$t('components.create.61zemc8cb788')" :rules="[{ type:'array', required: true, message: $t('components.create.61zemc8cb789') }]">
                    <a-cascader path-mode v-model="form.data.districtId" :options="regionData"  :placeholder="$t('components.create.61zemc8cb789')" />
                </a-form-item>
                <a-form-item field="districtId" :label="$t('components.create.61zemc8cb710')" :rules="[{ type:'array', required: true, message: $t('components.create.61zemc8cb711') }]">
                    <a-cascader path-mode v-model="form.data.districtId" :options="regionData"  :placeholder="$t('components.create.61zemc8cb711')" />
                </a-form-item>
            </a-form>
        </div>
    </a-drawer>
</template>

<script lang='ts' setup>
import { defineModel } from 'vue'
import { apiDeviceCreate } from '@/api/device'
import {regionData,codeToText} from "element-china-area-data";
const temp = useTemp()
const local = useLocal()

const show = defineModel('show', { default: false })
const formRef = ref()
const emit = defineEmits(['refresh'])
const form = reactive({
    data: {
        point: "",
        address: 0,
        name: "",
        province: 0,
        groupId:'',
        groupName:'',
        radius: 0,
        type:'',
        district: "",
        districtId:'',
        uid: local.usermsg.id == 3 ? 0 : local.usermsg.id,
    },
    point:{
        list:[] as any,
        loading:false
    },
    loading: false,
})
const submit = async () => {
    const validate= await formRef.value?.validate()
    if(validate) return;
    form.loading = true
    const point =  form.point.list?.find((item:any)=>item.id == form.data.point)
    const { code } = await apiDeviceCreate({
        ...form.data,
        point:point.location,
        address:point.name,
        provinceId:Number(form.data.districtId[0]),
        cityId:Number(form.data.districtId[1]),
        districtId:Number(form.data.districtId[2]),
        province:codeToText[form.data.districtId[0]],
        city:codeToText[form.data.districtId[1]],
        district:codeToText[form.data.districtId[2]],
        groupName:temp.deviceGroupList?.find((item:any)=>item.id == form.data.groupId)?.name,
        uid:local.usermsg.id == 3 ? 0 : local.usermsg.id,
    })
    form.loading = false
    if (code != 200) return;
    emit('refresh')
    formRef.value?.resetFields()
    show.value = false
}

</script>

<style scoped></style>